06. Finishing The Contact Form

Create The Contact Form

Right now, the page to create contacts is empty! Let's build out a form on that page so we start adding our own custom contacts.

⚠️ Required File ⚠️

At the beginning of the program, we gave you the option to clone our starter project or to start from scratch using create-react-app. If you haven't added it yet, you'll need the ImageInput.js file for the following video.

The ImageInput component is a custom <input> that dynamically reads and resizes image files before submitting them to the server as data URLs. It also shows a preview of the image. We chose to give this component to you rather than build it ourselves because it contains features related to files and images on the web that aren't crucial to your education in this context. If you're curious, feel free to dive into the code, but know it's not a requirement.

Here's the commit with the changes made in this video.

Serialize The Form Data

At this point, our form will serialize the values from user input (i.e., the name and email), adding them as a query string to the URL. We can add some additional functionality by having our app serialize these form fields on its own. After all, we want the app to ultimately handle creating the contact and saving it to the state.

To accomplish this, we'll use the form-serialize package to output this information as a regular JavaScript object for the app to use.

npm install --save form-serialize

Let's see it all in action!

Here's the commit with the changes made in this video.

Update Server With New Contact

We have our contact form. We're serializing our data and passing it up to the parent component. All we need to do to have a fully functional app is to save the contact to the server.

Here's the commit with the changes made in this video.